<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<head>
<base href="<%=basePath%>">

<title>主页</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">



<link rel="stylesheet" type="text/css" href="css/part.css">

<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>$(function(){
    $(".s3").on("click", "li", function(){
        var sId = $(this).data("id");  // 获取data-id的值
        window.location.hash = sId;  // 设置锚点
        loadInner(sId);
    });
    function loadInner(sId){
        var sId = window.location.hash;
        var pathn, i;
        switch(sId){
            case "#index_show" : pathn = "/CardSystem3.0/SelectAll"; i = 0; break;
            case "#add": pathn = "/CardSystem3.0/admin/add/info_add_submit.jsp"; i = 1; break;
            case "#update": pathn = "/CardSystem3.0/UpdateShow"; i = 2; break;
            case "#select": pathn = "/CardSystem3.0/admin/select/info_select_submit.jsp"; i = 3; break;
            case "#delete": pathn = "/CardSystem3.0/DeleteShow"; i = 4; break;
            case "#station": pathn = "/CardSystem3.0/RecycleShow"; i = 5; break;
            default: pathn = "/CardSystem3.0/SelectAll"; i = 0; break;
        }
        $("#content").load(pathn); // 加载相对应的内容
        $(".s3 li").eq(i).addClass("current").siblings().removeClass("current"); // 当前列表高亮
    }
    var sId = window.location.hash;
    loadInner(sId);
});</script>
<link rel="stylesheet" type="text/css" href="css/index.css">
<style>
			*{
				padding: 0px;
				margin: 0px;
				border: 0px;
				touch-action: pan-y;
			}
			/*这里获取浏览器显示区域100%的宽高*/
			html{
				width: 100%;
				height: 100%;
			}
			/*继承*/
			body{
				width: 100%;
				height: 100%;
			}
			body .bian {
				border-radius: 100%;
				width: 20px;
				height: 20px;
				background: rgba(0, 0, 0, 0.342);
				position: absolute;
				animation: bian 0.5s linear both 1;
			} 
			/*动画效果，从实体到透明，从小到大*/
			@keyframes bian {
				0% {
					opacity: 1;
					transform: scale(1)
				}

				100% {
					opacity: 0;
					transform: scale(8)
				}
			}
		</style>
</head>

<body>
<% String user_name_server= (String) request.getSession().getAttribute("user_name_server");

%>


<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<div class="carousel slide" id="carousel-349179" data-ride="carousel" data-interval="4000">
				<ol class="carousel-indicators">
					<li data-target="#carousel-349179" class="active" data-slide-to="0">
					</li>
					<li  data-target="#carousel-349179" data-slide-to="1">
					</li>
					<li data-target="#carousel-349179" data-slide-to="2">
					</li>
				</ol>
				<div class="carousel-inner">
					<div class="item active">
						<img alt="" src="images/head-07.jpg" width="100%" height="100px">
						<div class="carousel-caption">
		
						</div>
					</div>
					<div class="item">
						<img alt="" src="images/head-10.jpg" width="100%" height="100px">
						<div class="carousel-caption">
						</div>
					</div>
					<div class="item">
						<img src="images/head-09.jpg" width="100%" height="100px">
						<div class="carousel-caption">
						</div>
					</div>
				</div> <a class="left carousel-control" href="#carousel-349179" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
					   <a class="right carousel-control" href="#carousel-349179" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
			</div>
		</div>
	</div>
	<div class="row clearfix">
		<div class="col-md-2 column">
			<div class="btn-group btn-group-vertical btn-group-lg" style="float:left">
			<ul class="s3 nav nav-tabs nav-stacked">
			<li data-id="index_show"><a onclick="javascript:void(0);">首页</a></li>
			<li data-id="add"><a onclick="javascript:void(0);">增加名片</a></li>
			<li data-id="update"><a onclick="javascript:void(0);">修改名片</a></li>
			<li data-id="select"><a onclick="javascript:void(0);">查询名片</a></li>
			<li data-id="delete"><a onclick="javascript:void(0);">删除名片</a></li>
			<li data-id="station"><a onclick="javascript:void(0);">回收站</a></li>
			<li data-id="logout"><a href="/CardSystem3.0/logout">安全登出</a></li>
		</ul>
			</div>
		</div>
		<br><br><br><br>
		<br>
		<br>
		<div id="content"></div>
	</div>
</div>

<script>
			//获取鼠标点击位置的xy
			function getMousePos(event) {
				   var e = event || window.event;
				   var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
				   var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
				   var x = e.pageX || e.clientX + scrollX;
				   var y = e.pageY || e.clientY + scrollY;
				   return { 'x': x, 'y': y };
			}
			/*获取body的DOM*/
			var main = document.querySelector('body');
			/*鼠标每次在body的宽高内移动就会重新加载一次鼠标位置，这样点击后动画会更快的播放*/
			main.onmousemove = function (e) {
				let MouseXY = getMousePos(e);
				var x = MouseXY['x'];
				var y = MouseXY['y'];
				console.log(x, y);
				main.onclick = function () {
					var div = document.createElement('div');
					div.setAttribute("class","bian");
					div.style.left = x + 'px';
					div.style.top = y + 'px';
					/*随机颜色*/
					var r = Math.floor(Math.random() * 256)
					var g = Math.floor(Math.random() * 256)
					var b = Math.floor(Math.random() * 256)
					div.style.background = "rgb(" + r + ',' + g + ',' + b + ")";
					main.appendChild(div);
					setTimeout(function () {
						main.removeChild(div);
					}, 600)
				}
			}
		</script>
</body>
</html>
